<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <form action="">
        <input type="text" name="username" placeholder="请输入用户名" id="username">
        <span id="usernameSpan"></span>
        <br>
        <input type="password" name="password" placeholder="请输入密码"> <br>
        <button>提交</button>
    </form>
    <!--  导入axios类库  -->
    <script type="text/javascript" src="js/axios-0.18.0.js"></script>
    <script type="text/javascript">
        /*
            说明：
                1.后台地址url："http://localhost:8080/registerServlet"
                2.后台需要根据key即参数名是username来获取前端提交的用户名数据
                3.后台已经存在的用户名是："岩岩"
         */
        //1.给用户名输入框绑定一个离焦事件
        document.getElementById("username").onblur = function () {
            //2.获取输入框输入的用户名 this 表示<input type="text" name="username" placeholder="请输入用户名" id="username">标签对象
            let usernameValue = this.value;
            //获取Span标签对象
            let objSpan = document.getElementById("usernameSpan");
            //3.判断usernameValue是否有内容 trim() 去掉前后空格
            if(usernameValue.trim()){
                //4.发送ajax异步请求将输入框的用户名提交到后台
                axios.post("http://localhost:8080/registerServlet","username="+usernameValue)
                     .then((resp)=>{
                        //如果可以注册，后台响应的数据resp.data是true,不可以注册后台响应的数据resp.data是false
                        if(resp.data){
                            //可以注册
                            objSpan.innerHTML="√恭喜，该邮件地址可以注册";
                            //设置字体颜色为绿色
                            objSpan.style.color="green";
                        }else{
                            //不可以注册
                            objSpan.innerHTML="此用户名已被注册";
                            //设置字体颜色为绿色
                            objSpan.style.color="red";
                        }
                     });
            }
        }

    </script>
</body>

</html>